<template>
  <div class="box">
    <van-list finished-text="没有更多了" @load="onLoad">
      <div class="cell" v-for="(item, index) in list" :key="index">
        <div class="cell-top">{{item.title}}</div>
        <div class="cell-img" v-for="(ite, index) in item.teachers_list" :key="index">
          <img :src="ite.teacher_avatar" alt />
          <p>{{ite.teacher_name}}</p>
        </div>
        <div class="cell-buttom">人已经报名</div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { zxtcourseBasis } from "../../util/http";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      courseBasis: {
        // coures_type: 10,
        // 页
        // limit: 15,
        // 数量
        page: 1,
        // 下拉刷新
        loading: false,
        finished: false
      },
      list: []
    };
  },
  mounted() {
    this.user();
  },
  methods: {
    async user() {
      const res = await zxtcourseBasis(
        this.courseBasis.page
      );
      // console.log(res.list);
      this.list = res.list;
    },
    // 下拉刷新数据
    async onLoad() {
      console.log("上"+this.courseBasis.page);
      this.courseBasis.page++;
      // console.log("下"+this.courseBasis.page);
      // const res = await zxtcourseBasis(
      //   // this.courseBasis.limit,
      //   this.courseBasis.page
      // );
      // console.log(res);
      // this.list = res.list;
    }
  },
  computed: {},
  watch: {},
  created() {}
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100vw;
  height: 100vh;
}
.cell {
  width: 94%;
  background: silver;
  margin-left: 3%;
  margin-top: 20px;
  border-radius: 15px;
  overflow: hidden;
}
.cell-top {
  margin-top: 30px;
  height: 50%;
  width: 100%;
}
.cell-img {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 30%;
  height: 20%;
}
.cell-img > img {
  width: 30%;
}
.cell-buttom {
  margin-top: 20px;
  width: 100%;
  height: 30%;
  margin-bottom: 20px;
}
</style>
